<template>
  <div class="box">
      <JsContentTitle :pageTitle="state.pageTitle" :buttonData="state.buttonData"></JsContentTitle>
      <div class="contentView">
          <JsTable :toolBar="toolBar" :total="state.totalCount" :dataSource="state.dataSource"
              :columns="state.columns" :refresh="state.refresh">
              <template #search-last>
                  <el-button @click="reset" type="primary" size="small">重置</el-button>
              </template>
          </JsTable>
      </div>
      <el-dialog v-model="state.detailDialogVisible" title="图书详情信息" width="500">
          <el-descriptions>
              <el-descriptions-item label="图书简介">{{ state.form.synopsis }}</el-descriptions-item>
          </el-descriptions>
          <template #footer>
              <div class="dialog-footer">
                  <el-button @click="state.detailDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="state.detailDialogVisible = false">
                      确认
                  </el-button>
              </div>
          </template>
      </el-dialog>
      <el-dialog v-model="state.borrowDialogVisible" title="确认借阅信息" width="500">
          <el-descriptions>
              <el-descriptions-item label="书名">{{ state.form.name }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions>
              <el-descriptions-item label="作者">{{ state.form.author }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions>
              <el-descriptions-item label="出版日期">{{ state.form.year_publication }}</el-descriptions-item>
          </el-descriptions>
          <template #footer>
              <div class="dialog-footer">
                  <el-button @click="state.borrowDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="borrowSubmit">
                      借阅
                  </el-button>
              </div>
          </template>
      </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue"
import { ref } from "vue"
import { booksList, bookBorrow } from '@/api/borrow'
import { ElMessage } from "element-plus";

// 重置
const reset = () => {
  toolBar.value.form.author = ''
  toolBar.value.form.bookName = ''
  search()
}
// 查询
const search = () => {
  booksList(toolBar.value.form).then((res: any) => {
      state.value.dataSource = res.data.data
      state.value.dataSource.map((item: any) => {
          if (item.borrowed) {
              item.borrowState = '借阅中'
          } else {
              item.borrowState = '未借阅'
          }
      })
      state.value.totalCount = res.data.total
  })
}
// 借阅
const borrowSubmit = () => {
  bookBorrow(state.value.form.id).then((res: any) => {
      if (res.code === 0) {
          ElMessage({
              message: '图书借阅成功',
              type: 'success',
          })
          search()
      } else {
          ElMessage({
              message: '图书借阅失败',
              type: 'error'
          })
      }
  })
  state.value.borrowDialogVisible = false;
}

const state = ref({
  buttonData: [],
  refresh: 0,
  totalCount: 0,
  pageTitle: '图书借阅',
  form: {
      id: -1,
      author: '',
      name: '',
      synopsis: '',
      year_publication: '',
      created_at: new Date().toISOString().replace(/\.[\d]{3}Z$/, 'Z'),
      updated_at: '',
  },
  detailDialogVisible: false,
  borrowDialogVisible: false,
  columns: {
      props: [
          {
              name: '书名',
              key: 'name',
          },
          {
              name: '作者',
              key: 'author',
          },
          {
              name: '出版日期',
              key: 'year_publication',
          },
          {
              name: '借阅状态',
              key: 'borrowState',
          },
      ],
      options: {
          width: 150,
          btns: [
              {
                  label: '详情',
                  key: 'reset',
                  event: (params: any) => {
                      state.value.form.synopsis = params.synopsis
                      state.value.detailDialogVisible = true;
                  }
              },
              {
                  label: '借阅',
                  key: 'borrow',
                  type: 'warning',
                  event: (params: any) => {
                      state.value.form.id = params.id
                      state.value.form.author = params.author
                      state.value.form.name = params.name
                      state.value.form.year_publication = params.year_publication
                      state.value.borrowDialogVisible = true;
                  }
              },
          ],
      },
  },
  dataSource: [],
  tableEvent: {},
} as any)

const toolBar = ref<any>({
  form: {
      author: '',
      bookName: '',
  },
  input: [
      {
          label: '书名',
          key: 'bookName',
          placeholder: '请输入',
          el: 'input',
      },
      {
          label: '作者',
          key: 'author',
          placeholder: '请输入',
          el: 'input',
      },
  ],
  btns: [
      {
          label: '查询',
          icon: 'Search',
          event: search
      },
      {
          label: '重置',
          event: reset
      }
  ],
})

onMounted(() => {
  search()
})
</script>

<style lang="scss" scoped>
*::-webkit-scrollbar {
  display: none;
  width: 10px;
}

.box {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;

  .contentView {
      background-color: white;
      border-radius: 5px;
      height: calc(100vh - 144px);
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
}
</style>